'use strict';
import React, {Component} from 'react';
import {StyleSheet, Text, TouchableOpacity,} from 'react-native';

/** 封装透明反馈按钮 */
export default class OpacityButton extends Component{
    constructor(props){
        super();
        this.state={
            disabled : props.disabled,
        }
    }

    render(){
        return(
            <TouchableOpacity
                style={this.state.disabled ? styles.TouchDisable : styles.TouchEnable}
                activeOpacity={0.5}
                underlayColor='#a1a1a1'
                disabled={this.state.disabled}
                onPress={() => {this.props.onPress() }}>
                <Text style={this.state.disabled ? styles.TextDisable : styles.TextEnable}>{this.props.title}</Text>
            </TouchableOpacity>
        );
    }

    /** 设置是否可点击 */
    setDisable(isDisabled:boolean){
        this.setState({disabled : isDisabled})
    }
}

//样式定义
const styles = StyleSheet.create({
    TouchEnable:{
        paddingTop:2,
        paddingBottom:2,
        paddingLeft:4,
        paddingRight:4,
        borderColor: '#868686',
        borderWidth: 1,
        borderRadius: 4,
        backgroundColor: '#fff',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
    },
    TouchDisable:{
        paddingTop:2,
        paddingBottom:2,
        paddingLeft:4,
        paddingRight:4,
        borderColor: '#a1a1a1',
        borderWidth: 1,
        borderRadius: 4,
        backgroundColor: '#a1a1a1',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
    },
    TextEnable:{
        color:'#000'
    },
    TextDisable:{
        color:'#fff'

    },
});

